<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./css/index.css">
  <title>Document</title>
</head>
<body>
  <div id="wrapBg">
    <!-- 标题 -->
    <div id="headTitle">
      <img src="img/bird0.png" alt="" id="headBird">
    </div>
    <!-- 开始按钮 -->
    <button id="startBtn"></button>
    <!--草地效果-->
    <div id="grassLand1"></div>
    <div id="grassLand2"></div>
    
  </div>



  <script src="./js/bird.js"></script> 
  <script src="./js/baseObj.js"></script> 
  <script src="./js/block.js"></script> 
  

  
      
  <script>

    var jsWrapBg = document.getElementById('wrapBg')

    var jsHeadTitle = document.getElementById('headTitle')
    var jsHeadBird = document.getElementById("headBird")
    var index=0
    // console.log(jsHeadTitle.offsetTop)  //尝试函数



    var Y=3//标题摆动幅度
    var imgArr=['img/bird0.png','img/bird1.png']
    function headWave(){
      Y=Y*-1
      jsHeadTitle.style.top=jsHeadTitle.offsetTop+Y+"px"
    
    //bird交替更换图片，实现翅膀扇动
    jsHeadBird.src=imgArr[index++]
      if(index==2){
        index=0
      }
    }
    var headWaveTimer = setInterval(headWave,200) //200毫秒执行一次函数
    var jsGrassLand1 = document.getElementById('grassLand1')
    var jsGrassLand2 = document.getElementById('grassLand2')
    function LandRun(){
      if(jsGrassLand1.offsetLeft<=-343){
        jsGrassLand1.style.left='343px'
        
      }
      if(jsGrassLand2.offsetLeft<=-343){
        jsGrassLand2.style.left='343px'
        
      }
      jsGrassLand1.style.left=jsGrassLand1.offsetLeft-3+'px'
      jsGrassLand2.style.left=jsGrassLand2.offsetLeft-3+'px'
    }
    setInterval(LandRun,30) //30毫秒执行一次函数

    //点击开始按钮
    var jsStartBtn = document.getElementById('startBtn')      //获取到开始的dom结构
    jsStartBtn.onclick=function(){      //监听点击事件
      jsHeadTitle.style.display='none'    //让标题和鸟消失
      jsStartBtn.style.display='none'     //让按钮消失
      clearInterval(headWaveTimer)

      //插入小鸟到页面上
      bird.showBird(jsWrapBg)
      bird.flyBird()
      bird.wingWave()

      //点击事件的监听的两种写法:1.onclick  2.at....
      jsWrapBg.onclick = function(){
        bird.fallSpeed = -8
      }

      //出现管道
      var b = new Block()   //对象b会继承Block()所以的属性。理解：构造函数相当于工厂，生成的对象会隐式继承所以的属性和方法
      b.creatBlock()


    }

  </script>
</body>
</html>
